import { useState, useEffect } from 'react';
import { NavBar, List, Switch, Space } from 'antd-mobile';
import { ClockCircleOutline, StarOutline, CheckCircleFill } from 'antd-mobile-icons';
import { useHistory } from "react-router-dom";

import { CUSTOM_LAYOUT_STORAGE_KEY, SettingSwitchKeys } from '../../../constants';

const UncheckCirOutline = (props) => {
  return <a {...props} style={{ display: 'inline-block', width: '18.3px', height: '18.3px', border: '1px solid #ccc', borderRadius: '50%', boxSizing: 'border-box', verticalAlign: '-3.5px' }} />
}

export default function() {
  const [settingInfo, setSettingInfo] = useState({
    [SettingSwitchKeys.strongMessage]: true,
    [SettingSwitchKeys.atMeMessage]: true,
    [SettingSwitchKeys.concernMessage]: true,
    [SettingSwitchKeys.dealLaterMessage]: true,
    [SettingSwitchKeys.messageChannel]: true,
    [SettingSwitchKeys.conversationGroup]: false,
  });
  const history = useHistory();

  // 从本地存储中获取配置信息
  useEffect(() => {
    const setting = localStorage.getItem(CUSTOM_LAYOUT_STORAGE_KEY);
    if (setting) {
      try {
        setSettingInfo({ ...settingInfo, ...JSON.parse(setting) });
      } catch (e) {
        console.log(e);
      }
    }
  }, []);

  // 处理各项开关，统一方法
  const handleSwitch = (checked: boolean, type) => {
    const newSetting = { ...settingInfo, [type]: checked };
    const messageChannles = [SettingSwitchKeys.atMeMessage, SettingSwitchKeys.concernMessage, SettingSwitchKeys.dealLaterMessage];

    if (messageChannles.includes(type)) {
      if (messageChannles.every(key => newSetting[key])) {
        newSetting[SettingSwitchKeys.messageChannel] = true;
      } else if (messageChannles.every(key => !newSetting[key])) {
        newSetting[SettingSwitchKeys.messageChannel] = false;
      }
    } else if (type === SettingSwitchKeys.messageChannel) {
      messageChannles.forEach(key => newSetting[key] = checked);
    }

    // 将修改的信息保存在本地存储中
    setSettingInfo(newSetting);
    localStorage.setItem(CUSTOM_LAYOUT_STORAGE_KEY, JSON.stringify(newSetting));
  }

  return (
    <div className="layoutSettingPage">
      <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>自定义首页布局</NavBar>
      <Space direction='vertical' style={{ width: '100%', marginTop: 12, '--gap-vertical': '12px' }}>
        <List style={{ '--border-top': '0', '--border-bottom': '0' }}>
          <List.Item extra={<Switch checked={settingInfo[SettingSwitchKeys.strongMessage]} onChange={checked => handleSwitch(checked, SettingSwitchKeys.strongMessage)} />}>强提醒消息展示</List.Item>
        </List>
        <List style={{ '--border-top': '0', '--border-bottom': '0' }}>
          <List.Item extra={<Switch checked={settingInfo[SettingSwitchKeys.messageChannel]} onChange={checked => handleSwitch(checked, SettingSwitchKeys.messageChannel)} />}>消息直通车</List.Item>
          <List style={{ '--border-inner': '0', '--font-size': '15px' }}>
            <List.Item
              prefix={<span style={{ fontSize: 20, color: '#FFAC08'}}>@</span>}
              extra={settingInfo[SettingSwitchKeys.atMeMessage] ?
                <CheckCircleFill color="#1890FF" fontSize={20} onClick={() => handleSwitch(false, SettingSwitchKeys.atMeMessage)} /> :
                <UncheckCirOutline onClick={() => handleSwitch(true, SettingSwitchKeys.atMeMessage)} />
              }
              >@消息</List.Item>
            <List.Item
              prefix={<StarOutline style={{ fontSize: 18, color: '#f66604'}} />}
              extra={settingInfo[SettingSwitchKeys.concernMessage] ?
                <CheckCircleFill color="#1890FF" fontSize={20} onClick={() => handleSwitch(false, SettingSwitchKeys.concernMessage)} /> :
                <UncheckCirOutline onClick={() => handleSwitch(true, SettingSwitchKeys.concernMessage)} />
              }
            >特别关注</List.Item>
            <List.Item
              prefix={<ClockCircleOutline style={{ fontSize: 18, color: '#61c92e'}} />}
              extra={settingInfo[SettingSwitchKeys.dealLaterMessage] ?
                <CheckCircleFill color="#1890FF" fontSize={20} onClick={() => handleSwitch(false, SettingSwitchKeys.dealLaterMessage)} /> :
                <UncheckCirOutline onClick={() => handleSwitch(true, SettingSwitchKeys.dealLaterMessage)} />
              }
            >稍后处理</List.Item>
          </List>
        </List>
        <List style={{ '--border-top': '0', '--border-bottom': '0' }}>
          <List.Item extra={<Switch checked={settingInfo[SettingSwitchKeys.conversationGroup]} onChange={checked => handleSwitch(checked, SettingSwitchKeys.conversationGroup)} />}>聊天分组</List.Item>
          <List.Item onClick={() => history.push({ pathname: '/conversationGroupManage' })}>分组管理</List.Item>
        </List>
      </Space>
    </div>
  )
}